<template>
  <div v-for="(item, index) in data" :key="index" class="tree"
    @click.stop="clickItem(item)">
    {{ item.name }}
    <!-- <TreeItem v-if="item?.children?.length" :data="item.children" @on-click="emit('on-click', item)" /> -->
    
    <TreeItem v-if="item?.children?.length" :data="item.children" @on-click="clickItem" />
  </div>
</template>

<script setup lang="ts">
import TreeItem from './index.vue'
type TreeList = {
  name: string
  icon?: string
  children?: TreeList[] | []
}
type Props = {
  data?: TreeList[]
}
defineProps<Props>()
const emit = defineEmits<{
  (e: 'on-click', item: TreeList): void
}>()

const clickItem = (item: TreeList) => {
  emit('on-click', item)
}
</script>

<style lang="less" scoped>
.tree {
  margin-left: 10px;
  padding-top: 10px;
  cursor: pointer;
}
</style>